<!-- 404页面 -->
<template>
  <div class="error-page">
    <div class="error-content">
      <h1 class="error-code">404</h1>
      <p class="error-message">页面不存在</p>
      <router-link to="/" class="back-home">返回首页</router-link>
    </div>
  </div>
</template>

<script lang="ts" setup name:='Error404'>
import { onMounted } from 'vue';
import { useRouter } from 'vue-router';
const router = useRouter();

onMounted(() => {
  router.push('/');
});
</script>

<style lang="scss" scoped>
.error-page {
  display: flex;
  justify-content: center;
  align-items: center;
  height: 100vh;
  background-color: #f5f5f5;
  font-family: Arial, sans-serif;
  color: #333;
  .error-content {
    text-align: center;
    .error-code {
      font-size: 100px;
      font-weight: bold;
      color: #ff4d4f;
    }
    .error-message {
      font-size: 24px;
      margin-top: 10px;
    }
    .back-home {
      display: inline-block;
      margin-top: 20px;
      padding: 10px 20px;
      background-color: #1890ff;
      color: white;
      border-radius: 5px;
      text-decoration: none;
    }
  }
}
</style>
